<template>
    <div id="box" class="change_pwd bgfff">
        <header id="head" class="bgfff">
            <div id="bar"></div>
            <ul class="flex-col">
                <li class="head-l">
                    <i>XX</i>
                </li>
                <li class="box1 head-c">修改密码</li>
                <li class="head-r flex-col flex-middle"></li>
            </ul>
        </header>
        <main class="font-14">
            <ul>
                <li class="flex-col">
                    <div>绑定的手机：</div>
                    <input type="text" value="12465456" class="box1">
                    <span class="font-10">发送验证码</span>
                </li>
                <li class="flex-col">
                    <div>验证码</div>
                    <input type="text" placeholder="请输入验证码" class="box1">
                </li>
                 <li class="flex-col">
                    <div>新密码</div>
                    <input type="text" placeholder="请输入密码" class="box1">
                </li>
                 <li class="flex-col">
                    <div>确认密码</div>
                    <input type="text" placeholder="请再次输入密码" class="box1">
                </li>
            </ul>
        </main>
        <footer class="box-center">
           <div class="bgmain cfff font-12 box-center">保存</div>
        </footer>
    </div>
</template>

<script>
export default {
  name: "change_pwd"
};
</script>

<style scoped lang="scss">
    @import '../../css/rem.scss';
    .change_pwd{
        main{
            ul{
               
                li{
                    position: relative;
                    height: p2r(50px);
                    line-height: p2r(50px);
                    border-bottom: 1px solid #ccc;
                    padding: 0 p2r(15px);
                    div{
                        width: p2r(100px);
                    }
                    span{
                        display: inline-block;
                        height: p2r(28px);
                          line-height: p2r(30px);
                          text-align: center;
                        width: p2r(80px);
                        position: absolute;
                        top: p2r(10px);
                        right: p2r(15px);
                        padding:0 p2r(8px);
                        border-radius: p2r(40px);
                        border: 1px solid #888;
                    }
                    input{
                        border: none;
                        // padding: 0 p2r(15px);
                    }
                }
            }
        }
        footer{
            margin-top: p2r(190px);
            div{
                width: 90%;
                height: p2r(40px);
                border-radius: p2r(40px);
            }
        }
    }
</style>